<template>
	<view>
		<!-- <cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">课程表</block>
		</cu-custom> -->
		<view>
			<view class="order">
				<view class="cu-list menu margin-top">
					<view class="cu-item">
						<view class="content">
							<image src="/static/images/event/s.png" mode="aspectFit"></image>
							<text class="text-grey">设备告警</text>
							<text class="text-grey-red">{{sjListData.deviceWarningCount}}</text>
						</view>
						<view class="action">
							<view>
								<u-icon name="arrow-right" color="#a6a6a6" @click="handleToInfo(1)" size="18">
								</u-icon>
							</view>
						</view>
					</view>

					<view class="cu-item">
						<view class="content">
							<image src="/static/images/event/r.png" mode="aspectFit"></image>
							<text class="text-grey">人员告警</text>
							<text class="text-grey-red">{{sjListData.personnelWarningCount}}</text>
						</view>
						<view class="action">
							<view>
					 		<u-icon name="arrow-right" color="#a6a6a6" @click="handleToInfo(2)" size="18">
								</u-icon>
							</view>
						</view>
					</view>

					<view class="cu-item">
						<view class="content">
							<image src="/static/images/event/we.png" mode="aspectFit"></image>
							<text class="text-grey">隐患事件</text>
							<text class="text-grey-red">{{sjListData.hiddenDangerCount}}</text>
						</view>
						<view class="action">
							<view>
								<u-icon name="arrow-right" color="#a6a6a6" @click="handleToInfo(3)" size="18">
								</u-icon>
							</view>
						</view>
					</view>

					<view class="cu-item">
						<view class="content">
							<image src="/static/images/event/q.png" mode="aspectFit"></image>
							<text class="text-grey">企业风险</text>
							<text class="text-grey-red">{{sjListData.enterpriseRiskCount}}</text>
						</view>
						<view class="action">
							<view>
								<u-icon name="arrow-right" color="#a6a6a6" @click="handleToInfo(4)" size="18">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sjList
	} from "@/api/sj/sj.js";
	export default {
		data() {
			return {
				sjListData: {},
				show: false,
			};
		},

		mounted() {
			this.getSjList();
		},
		methods: {
			handleToInfo(id) {
				if (id == 1) {
					uni.navigateTo({
						url: "/pages/work/worklist/index"
					});
				}
				if (id == 2) {
					uni.navigateTo({
						url: "/pages/work/personnllist/index"
					});
				}
				if (id == 3) {
					uni.navigateTo({
						url: "/pages/work/dangereventlist/index"
					});
				}
				if (id == 4) {
					uni.navigateTo({
						url: "/pages/work/enterpriserisklist/index"
					});
				}
			},
			// 事件数据
			getSjList() {
				sjList()
					.then((result) => {
						this.sjListData = result.data;
						// console.log(this.sjListData)
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		width: 100vw;
	}

	.text-grey {
		font-size: 16px;
		font-weight: 700;
		color: #414141;
	}

	.text-grey-red {
		margin-left: 18px;
		font-weight: bold;
		color: #d03a3a;
		font-style: italic;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 16rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		height: 1180rpx;
		box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
		padding: 0px 5px 0px 5px;
	}

	.cu-list.menu>.cu-item .content>uni-image {
		display: inline-block;
		margin-right: 12px;
		width: 58rpx;
		height: 58rpx;
		vertical-align: middle;
	}

	.cu-list.menu>.cu-item:last-child:after {
		/* border: none; */
		border-bottom: 1px solid #ddd;
	}

	.cu-list.menu>.cu-item .content {
		font-size: 36rpx;
		line-height: 1.6em;
	}
</style>
